<template>
	<div class="search-container search-form">
		<div class="card" v-show="isShowSearch()">
			<el-card v-show="isShowSearch()" shadow="never">
 
				<form-create :rule="search" v-model="searchOptions.fApi" :option="searchOptions"
					:value.sync="queryParams" />
			</el-card>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'Search',
		props: {
			search: {
				type: Array,
				default () {
					return []
				}
			}
		},
		watch: {
			queryParams: {
				handler(newName, oldName) {
					this.$emit('handleSearch')
 
				},
				deep: true
			}
		},
		data() {
			return {
				queryParams: {},
				searchOptions: {
					fApi: {},
					form: {
						inline: true,
						labelWidth: 'auto'
					},
					submitBtn: {
						icon: 'el-icon-search',
						innerText: '搜索',
						click: this.handleSearch,
						size: 'mini',
						type: 'zz7'
					},
					resetBtn: {
						innerText: '重置',
						show: true,
						icon: 'el-icon-refresh',
						click: this.handleReset,
						type: 'zz4',
						size: 'mini',
					}
				}
			}
		},
		methods: {
			isShowSearch() {
				return this.search.filter(function(item) {
					return item.type !== 'hidden'
				}).length
			},
			handleSearch() {

				this.$emit('handleSearch')
			},
			handleReset() {
				this.$emit('handleReset')
			},

		}
	}
</script>

<style scoped>

</style>